<template>
  <div class="task-center">
    <!-- 顶部操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="handleRefresh">刷新</el-button>
      <el-button type="success" @click="handleDownload">下载</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>

    <!-- 导出记录表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 16px"
      :header-cell-style="{ background: '#F8F9FA' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="billType" label="单据类型" min-width="120" />
      <el-table-column prop="progress" label="导出进度" min-width="100" />
      <el-table-column prop="status" label="导出状态" min-width="100" />
      <el-table-column
        prop="downloadCount"
        label="下载次数"
        min-width="100"
        align="right"
      />
      <el-table-column prop="user" label="导出用户" min-width="120" />
      <el-table-column prop="exportTime" label="导出时间" min-width="160" />
      <el-table-column prop="completeTime" label="完成时间" min-width="160" />
    </el-table>

    <!-- 空状态 -->
    <div class="empty-state" v-if="tableData.length === 0">
      <i class="el-icon-document" style="font-size: 48px; color: #dcdcdc"></i>
      <p>暂无数据</p>
    </div>

    <!-- 分页 + 底部提示 -->
    <div class="footer">
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
      <div class="hint">仅保存7天内的导出记录，超过7天自动清理</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// ========== 数据定义 ==========
const tableData = ref([]); // 导出记录列表
const selectedRows = ref([]); // 选中的记录（用于删除）

// 分页参数
const pagination = reactive({
  currentPage: 1, // 当前页
  pageSize: 50, // 每页条数
  total: 0, // 总记录数
});

// ========== 模拟数据（可替换为真实接口） ==========
const mockRecords = [
  {
    id: 1,
    billType: "销货单",
    progress: "100%",
    status: "已完成",
    downloadCount: 2,
    user: "admin",
    exportTime: "2025-06-20 09:00:00",
    completeTime: "2025-06-20 09:05:00",
  },
  {
    id: 2,
    billType: "购货单",
    progress: "50%",
    status: "处理中",
    downloadCount: 0,
    user: "sales01",
    exportTime: "2025-06-21 14:30:00",
    completeTime: "-",
  },
  {
    id: 3,
    billType: "调拨单",
    progress: "100%",
    status: "已完成",
    downloadCount: 1,
    user: "finance",
    exportTime: "2025-06-22 10:15:00",
    completeTime: "2025-06-22 10:20:00",
  },
];

// ========== 方法逻辑 ==========
/** 刷新数据（模拟接口请求） */
const handleRefresh = () => {
  // 模拟从后端获取数据
  tableData.value = mockRecords.filter(
    (item) =>
      // 模拟仅显示7天内数据（此处简单过滤，实际需接口处理）
      new Date(item.exportTime) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
  );
  pagination.total = tableData.value.length;
  ElMessage.success("刷新成功！");
};

/** 下载选中记录（模拟） */
const handleDownload = () => {
  if (tableData.value.length === 0) {
    ElMessage.warning("暂无数据可下载");
    return;
  }
  ElMessage.info("开始打包下载...（模拟）");
};

/** 删除选中记录（模拟） */
const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的记录");
    return;
  }
  // 从表格中移除选中项
  tableData.value = tableData.value.filter(
    (item) => !selectedRows.value.some((sel) => sel.id === item.id)
  );
  pagination.total = tableData.value.length;
  selectedRows.value = []; // 清空选中
  ElMessage.success("删除成功！");
};

/** 分页-条数变化 */
const handleSizeChange = (val) => {
  pagination.pageSize = val;
  handleRefresh(); // 重新获取数据（模拟）
};

/** 分页-页码变化 */
const handleCurrentChange = (val) => {
  pagination.currentPage = val;
  handleRefresh(); // 重新获取数据（模拟）
};

/** 多选事件（记录选中项） */
const handleSelectionChange = (val) => {
  selectedRows.value = val;
};

// ========== 初始化（默认刷新数据） ==========
handleRefresh();
</script>

<style scoped>
.task-center {
  padding: 24px;
  background: #fff;
}

.action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  color: #999;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.pagination {
  text-align: right;
}

.hint {
  color: #999;
  font-size: 12px;
}
</style>